<template>
    <div>
        <div class="content">
            <div class="return" @click="close">
                <img class="img1" src="../../assets/img/return.png" alt="" />
                <p class="return-p">返回</p>
            </div>
            <div class="card1-money">
                <div
                    style="display:inline-block;width: 49%;background: #fff; padding: 0.25rem 0.2rem;overflow: hidden;box-sizing: border-box;border-radius: .3rem">

                    <div class="iptBg">
                        <span class="card1-text">我的领券码1(元)：</span> <input class="input" type="number" v-model="money"
                            placeholder="请输入领券码金额" /> <span class="ipt-input">点击可修改</span>
                    </div>
                    <div style="
                     display: flex;">
                        <button class="cancelBtn" @click="cancel(1)" v-if="staff == 2">
                            确认金额
                        </button>
                        <button class="confirmBtn" @click="sureFn(1)">
                            预览
                        </button>
                    </div>
                </div>
                <div
                    style="display:inline-block;width: 49%;background: #fff; padding: 0.25rem 0.2rem;overflow: hidden;box-sizing: border-box;margin-left: 2%;border-radius: .3rem;">

                    <div class="iptBg">
                        <span class="card1-text">我的领券码2(元)：</span> <input class="input" type="number" v-model="money1"
                            placeholder="请输入领券码金额" /> <span class="ipt-input">点击可修改</span>
                    </div>
                    <div style="
                        display: flex;">
                        <button class="cancelBtn" @click="cancel(2)" v-if="staff == 2">
                            确认金额
                        </button>
                        <button class="confirmBtn" @click="sureFn(2)">
                            预览
                        </button>
                    </div>

                </div>
            </div>
            <!--   <div class="card1">
                <div class="iptBg">
                    <span class="card1-text">我的领券码(元)：</span> <input class="input" type="number" v-model="money"
                        placeholder="请输入领券码金额" /> 
                </div>
                <div style="
                display: flex;
              ">
                    <button class="cancelBtn" @click="cancel" v-if="staff == 2">
                        确认金额
                    </button>
                    <button class="confirmBtn" @click="sureFn">
                        预览
                    </button>
                </div>
            </div> -->
            <div class="tab">
                <van-tabs v-model="active" @click="onClick">
                    <van-tab title="申请中">
                        <div class="card1" v-for="(item, index) in list" :key="index">
                            <div class="card1-text">账号：{{ item.phone }}</div>
                            <div class="card1-text">时间：{{ item.scantime }}</div>
                            <div class="card1-text">金额： <span style="color:red;">{{ item.money + '元' }}</span> </div>
                            <div class="card1-text">有效天数：：{{ item.days + '天' }}</div>
                            <div class="card1-text">是否通过：<div class="editBtns" @click="forbid(item, -1)">拒绝</div>
                                <div class="editBtn" @click="forbid(item, 1)">通过</div>
                            </div>
                        </div>
                        <div class="norecords" v-if="list && list.length == 0">
                            暂无记录
                        </div>
                    </van-tab>
                    <van-tab title="可用 ">
                        <div class="card1" v-for="(item, index) in list" :key="index">
                            <div class="card1-text">账号：{{ item.phone }}</div>
                            <div class="card1-text">时间：{{ item.scantime }}</div>
                            <div class="card1-text">金额： <span style="color:red;">{{ item.money + '元' }}</span> </div>
                            <div class="card1-text">有效天数：：{{ item.days + '天' }}</div>
                        </div>
                        <div class="norecords" v-if="list && list.length == 0">
                            暂无记录
                        </div>
                    </van-tab>
                    <van-tab title="已用">
                        <div class="card1" v-for="(item, index) in list" :key="index">
                            <div class="card1-text">账号：{{ item.phone }}</div>
                            <div class="card1-text">时间：{{ item.scantime }}</div>
                            <div class="card1-text">金额： <span style="color:red;">{{ item.money + '元' }}</span> </div>
                        </div>
                        <div class="norecords" v-if="list && list.length == 0">
                            暂无记录
                        </div>
                    </van-tab>
                    <van-tab title="拒绝">

                        <div class="card1" v-for="(item, index) in list" :key="index">
                            <div class="card1-text">账号：{{ item.phone }}</div>
                            <div class="card1-text">时间：{{ item.scantime }}</div>
                            <div class="card1-text">金额： <span style="color:red;">{{ item.money + '元' }}</span> </div>
                        </div>
                        <div class="norecords" v-if="list && list.length == 0">
                            暂无记录
                        </div>
                    </van-tab>
                    <van-tab title="过期">
                        <div class="card1" v-for="(item, index) in list" :key="index">
                            <div class="card1-text">账号：{{ item.phone }}</div>
                            <div class="card1-text">时间：{{ item.scantime }}</div>
                            <div class="card1-text">金额： <span style="color:red;">{{ item.money + '元' }}</span> </div>
                        </div>
                        <div class="norecords" v-if="list && list.length == 0">
                            暂无记录
                        </div>
                    </van-tab>
                </van-tabs>
            </div>
            <van-dialog v-model="isSureShow" title="" :show-cancel-button="false" :showConfirmButton="false" width="80%">
                <div style="padding: 0 0.5rem 0.5rem">
                    <div class="tipsContent">
                        <div class="addAssistant">请确定是否更改金额<span style="color:red ;">（元）</span></div>
                        <input class="input" type="number" v-model="moneys" placeholder="请输入金额" />
                        <div class="line"></div>
                    </div>
                    <div style="
              display: flex;
              align-items: center;
              justify-content: space-around;
            ">
                        <button class="cancelBtn" @click="canclose">
                            <span>取消</span>
                        </button>
                        <button class="confirmBtn" @click="sumbit">
                            <van-loading v-if="loadings" size="24px">提交中...</van-loading>
                            <span v-else>提交</span>
                        </button>
                    </div>
                </div>
            </van-dialog>
        </div>
    </div>
</template>
    
<script>
import QRCode from 'qrcodejs2'
import { voucherApplyLIst, voucherApplyConfirm, getqrcode, setqrcode } from "@/api/fulfil.js";
export default {
    name: 'audit',
    data() {
        return {
            agentid: "",
            list: [],
            role: "",
            show: true,
            phone: '',
            pwd: '',
            loadings: false,
            active: '0',
            state: '0',//-1拒绝 0申请 1可用 2已用 3过期 其他：异常
            money: '',//优惠券金额
            money1: '',//优惠券金额
            isSureShow: false,
            moneys: '',
            qyery: '',
            type: '',
            staff: '',
            staffList: [],
            timer:null,
        };
    },
    mounted() {

    },
    activated() {
        this.staff = localStorage.getItem("staff");
        this.getList();
        this.timer =  setInterval(this.getList,5000);
        this.getqrcode();


    },
    deactivated(){
        clearInterval(this.timer);
    },
    beforeDestroy(){
        clearInterval(this.timer);
    },
    destroyed(){
        clearInterval(this.timer);
    },
    methods: {
        //取消
        canclose() {
            this.isSureShow = false;
        },
        //通过按钮
        sumbit() {
            this.loadings = true;
            this.sumbitBtn(this.qyery, this.type);
        },
        onClick(title) {
            console.log(title, 'title');
            if (title == '0') {
                this.state = '0'
            } else if (title == '1') {
                this.state = '1'
            } else if (title == '2') {
                this.state = '2'
            } else if (title == '3') {
                this.state = '-1'
            } else if (title == '4') {
                this.state = '3'
            }
            this.list = [];
            this.getList();
        },
        sumbitBtn(item, type) {
            voucherApplyConfirm({
                agentid: localStorage.getItem("agentid"),
                state: type.toString(),
                applyid: item.id,
                money: this.moneys.toString(),
            })
                .then((res) => {
                    if (res.data.code == 0) {
                        this.$Toast("审核成功");
                        this.state = '0';
                        this.getList();
                        this.isSureShow = false;
                    } else {
                        this.$Toast("审核失败");
                    }
                    console.log(this.list, 'res');
                    this.loadings = false;
                })

                .catch((error) => {
                    this.loadings = false;
                    console.log(error);
                });
        },
        getList() {
            voucherApplyLIst({
                agentid: localStorage.getItem("agentid"),
                state: this.state.toString()
            })
                .then((res) => {
                    let money = res.data.data.qrcode.money;
                    this.list = res.data.data.list;
                    if (money) {
                        this.money = money
                    }
                    console.log(this.list, 'res');
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //设置金额
        setqrcode(qrcode,type) {
            setqrcode({
                agentid: localStorage.getItem("agentid"),
                money:  type == 1 ? this.money.toString() :  this.money1.toString(),
                qrcode: qrcode.toString()
            })
                .then((res) => {
                    if (res.data.code == 0) {
                        this.$Toast("设置金额成功");
                        this.getqrcode();
                    } else {
                        this.$Toast("设置金额失败");
                    }
                    console.log(res, 'res');
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //预览
        getqrcode() {
            getqrcode({
                agentid: localStorage.getItem("agentid"),
            })
                .then((res) => {
                    console.log(res);
                    if (res.data.code == '0') {
                        this.staffList = res.data.data;
                        console.log(this.staffList, 'this.staffList');
                        if (this.staffList.length == 0) {
                            this.money = '';
                            this.moneys = '';
                        } else if (this.staffList.length == 1) {
                            this.money = this.staffList[0].money;
                            this.moneys = '';
                        } else if (this.staffList.length == 2) {
                            this.money = this.staffList[0].money;
                            this.money1 = this.staffList[1].money;
                        }
                        console.log(res, 'res');

                    } else {
                        this.$Toast("请先设置二维码金额");
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        forbid(item, type) {
            if (type == 1) {
                this.moneys = item.money;
                this.isSureShow = true;
                this.qyery = item;
                this.type = type;
            } else {
                this.sumbitBtn(item, type);
            }

        },

        cancel(type) {
            if (type == 1) {
                if (!this.money) {
                    this.$Toast("请先输入设置金额");
                } else {
                    this.setqrcode(this.staffList[0].qrcode,type);
                }
            } else if (type == 2) {
                if (!this.money1) {
                    this.$Toast("请先输入设置金额");
                } else {
                    this.setqrcode(this.staffList[1].qrcode,type);
                }
            }



        },
        sureFn(type) {

            if (type == 1) {
                this.$router.push({
                    path: "/qrcode", query: {
                        name: this.staffList[0].name,
                        money: this.staffList[0].money,
                        qrcode: this.staffList[0].qrcode
                    }
                });
            } else {
                this.$router.push({
                    path: "/qrcode", query: {
                        name: this.staffList[1].name,
                        money: this.staffList[1].money,
                        qrcode: this.staffList[1].qrcode
                    }
                });
            }

        },
        close() {
            window.history.go(-1);
        },
    },
};
</script>
    
<style scoped>
.content {
    padding-bottom: 30px;
    overflow: hidden;
    width: 100%;
    min-height: 100vh;
    background: #e1f7fc;
}

.card1 {
    overflow: hidden;
    margin: 0.3rem auto 0;
    padding: 0.25rem 0.5rem;
    width: 75%;
    background: #fff;
    border-radius: 0.375rem;
}

.card1-money {
    overflow: hidden;
    margin: 0.3rem auto 0;
    width: 85%;
    border-radius: 0.375rem;
}

.card1-title {
    margin-top: 0.2rem;
    font-size: 0.4125rem;
    font-weight: 600;
    color: #000;
}

.card1-text {
    margin: 0.25rem 0 0 0.2rem;
    font-size: 0.3125rem;
    font-weight: 600;
    color: #000;
}

.card1-text1 {
    margin: 0.25rem 0 0 0.2rem;
    font-size: 0.3125rem;
    font-weight: 600;
    color: #000;
    text-align: center;
}

.img1 {
    display: inline-block;
    width: 27px;
    height: 48px;
    vertical-align: middle;
}

.return {
    margin: 20px 0 0 30px;
    font-size: 40px;
}

.return-p {
    margin-left: 20px;
    display: inline-block;
    vertical-align: middle;
}

.norecords {
    margin-top: 2rem;
    color: #ffbe4c;
    font-size: .5rem;
    text-align: center;
}

.addStore {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1rem;
    font-size: .4rem;
    text-align: center;
    color: #AD3516;
    background: linear-gradient(180deg, #FFE9C6, #FFD584);
    box-shadow: 0px 3px 8px 0px rgba(150, 51, 20, 0.42);
    line-height: 1rem;
    border-radius: .5rem;
}

.confirmBtn {
    margin-top: .2rem;
    margin-left: .2rem;
    width: 2rem;
    height: .8rem;
    background: #FFD584;
    box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.25);
    border-radius: 0.6rem;
    opacity: 1;
    color: #000;
    border: none;
    font-size: 0.3rem;
}

.cancelBtn {
    margin-top: .2rem;
    margin-left: .2rem;
    width: 2rem;
    height: .8rem;
    background: #FFD584;
    box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.25);
    border-radius: 0.6rem;
    opacity: 1;
    color: #000;
    border: none;
    font-size: 0.3rem;
}

.tipsContent {
    width: 100%;
    margin: 0.5rem 0 .3rem;
    display: inline-block;
    font-size: 0.4rem;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #111111;
}

.input {
    display: inline-block;
    margin-left: 0.1rem;
    margin-top: 0.4rem;
    width: 70%;
    background: white;
    border: none;
    padding: 0.1875rem 0.25rem;
    border-radius: 0.25rem;
    /*  border-inline: 2px solid transparent; */
}

.addAssistant {
    width: 100%;
    text-align: center;
    font-size: .4rem;
}

.line {
    margin: 0 auto;
    width: 90%;
    height: 2px;
    background-color: #ccc;
}

.editBtn {
    margin-left: .2rem;
    padding: 0 .4rem;
    display: inline-block;
    background-color: #FFD584;
    border-radius: .4rem;
    height: .5rem;
    text-align: center;
    line-height: .5rem;
}

.editBtns {
    padding: 0 .3rem;
    display: inline-block;
    background-color: red;
    border-radius: .4rem;
    height: .5rem;
    text-align: center;
    line-height: .5rem;
    color: #fff;
}

.aidee-selete {
    margin: 0.7rem 0 0 0.55rem;
    font-size: 0.35rem;
    font-family: PingFang;
    font-weight: 500;
    color: #7796cb;
}

.aidee-selete-span {
    color: red;
}

.aside-input1 {
    box-sizing: border-box;
    padding-left: 0.525rem;
    width: 80%;
    height: 1.05rem;
    color: #7796cb;
    font-weight: 500;
    font-size: 0.35rem;
    font-family: PingFang;
    line-height: 1.05rem;
    border-radius: .5rem;
    border: 1px solid #ccc;
}

::v-deep .van-tabs__nav {
    background-color: #e1f7fc;
}

::v-deep .van-tab {
    font-size: 0.377rem;
}

.tab {
    margin-top: .2rem;
}

.qrcode-title {
    margin: .3rem 0;
    width: 100%;
    text-align: center;
    font-size: .4rem;
}

.qrcode-titles {
    margin: .2rem 0;
    width: 100%;
    text-align: center;
    font-size: .4rem;
}

.iptBg {
    position: relative;
}

.ipt-input {
    position: absolute;
    bottom: .2rem;
    right: .5rem;
    color: #FFD584;
}

/* .money-bt {
    
} */</style>